import React from 'react'
import { BrowserRouter, Switch, Route } from 'react-router-dom'
import loadable from 'loadable-components'
import Loading from '@/components/loading'

const lazy = (loader: () => Promise<any>) => {
  return loadable(loader, {
    LoadingComponent: Loading
  })
}

const routes = [
  {
    path: '/',
    exact: true,
    component: lazy(() => import(/* webpackChunkName: "home" */ '@/pages/Home'))
  },
  {
    path: '/about',
    component: lazy(() => import(/* webpackChunkName: "about" */ '@/pages/About'))
  },
  {
    path: '/*',
    component: lazy(() => import(/* webpackChunkName: "not-found" */ '@/pages/NotFound'))
  }
]

const Router = () => {
  return (
    <BrowserRouter>
      <Switch>
        {routes.map(route => <Route key={route.path} {...route} />)}
      </Switch>
    </BrowserRouter>
  )
}

export default Router
